<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 200px;
        height: 100px;
        display: block;
      }
    </style>
  </head>
  <body>
    <button id="btn"><span>这是</span>切换图片</button>
    <img src="./images/bg1.jpg" alt="picture" />
    <form action="">
      <input name="txt" type="text" value="这是表单文本框的内容" /><br />
      <input type="radio" name="sex" value="1" />男
      <input type="radio" name="sex" value="0" />女<br />

      <input type="checkbox" name="hobby" value="唱" />唱
      <input type="checkbox" name="hobby" value="跳" />跳
      <input type="checkbox" name="hobby" value="rap" />rap
      <input type="checkbox" name="hobby" value="篮球" />篮球<br />

      <input type="button" value="提交" id="ok" />
    </form>

    <script>
      //Ⅰ）获取文本内容
      //节点.innerHTML  //获取节点下的所有内容包含了标签（用于获取双标签的文本内容）
      console.log(document.getElementById("btn").innerHTML);
      console.log(document.getElementsByTagName("img")[0].innerHTML); //单标签不能使用该方式获取问文本内容，因为单标签无文本内容
      //节点.innerText  //获取节点下的文本内容，会过滤掉标签
      console.log(document.getElementById("btn").innerText); //文本内容中的标签不会获取到
      //节点.value  //获取input输入框等表单控件的内容
      console.log(document.getElementsByName("txt")[0].value);
      console.log(document.forms[0].txt.value); //多种获取方式
      console.log(document.querySelector("input").value);
      document.getElementsByName("txt")[0].onblur = function () {
        //onblur:事件（失焦点时触发该事件）
        console.log(this.value); //这里的this代表的是当前操作的DOM对象document.getElementsByName("txt")[0]
        if (this.value == "aaa") {
          alert("登录成功");
          location.href = "https://baidu.com"; //location.href可以用于动态跳转；a标签静态跳转
        } else {
          alert("您输入账号不正确");
        }
      };
      //节点.getAttribute("value") //value是表单输入框的属性，可以使用getAttribute获得value的值
      console.log("value" + document.forms[0].txt.getAttribute("value")); //只能获取标签属性的值，不能获取标签的文本内容

      //Ⅱ）设置文本内容
      //节点.innerHTML= "文本内容"  //会翻译html标签
      document.getElementById("btn").innerHTML = "aaa";
      document.getElementById("btn").innerHTML =
        "这是一个<strong>按钮</strong>"; //会自动解析html标签
      //节点.innerText = “文本内容”  //不会翻译html标签
      document.getElementById("btn").innerText =
        "这是一个<strong>按钮</strong>"; //不会自动解析标签
      //节点.value = 值
      document.forms[0].sex.value = 0; //设置某个单选钮被选中
      document.forms[0].hobby.value = "唱"; //不能通过value设置复选框的某项被选中
      document.forms[0].hobby[1].checked = true; //设置复选框的某项被选中要用checked属性实现
      document.forms[0].hobby[2].checked = true;
      document.forms[0].hobby[2].checked = false; //取消被选中

      //单击‘提交’按钮获取所有复选框被选中的内容
      document.getElementById("ok").onclick = function () {
        var chks = document.forms[0].hobby; //获取所有的复选框DOM
        //console.log(chks);
        var arr = [];
        for (var i in chks) {
          if (chks[i].checked == true) {
            //如果被选中
            arr.push(chks[i].value); //将value传入数组里
          }
        }
        console.log(arr);
      };
      //节点.setAttribute("value",值)  //因为value是属性，所以也可以用这个方法设置内容。
      document.forms[0].hobby[0].setAttribute("value", "不唱"); //修改value值
      document.forms[0].hobby[0].setAttribute("checked", true); //设置被选中
      document.forms[0].hobby[0].removeAttribute("checked"); //设置取消被选中

      //Ⅲ）删除文本内容
      //节点.innerHTML=""
      document.getElementById("btn").innerHTML = "";
      //节点.innerText=""
      document.getElementById("btn").innerText = "";
      //节点.value=""
      document.forms[0].hobby[0].value = "";
      //节点.removeAttribute（“value“）
      document.forms[0].hobby[0].removeAttribute("value");
    </script>
  </body>
</html>
